<template>
  <div class="login-container relative min-h-screen">
    <div class="absolute top-[29.2%] right-[5.8%]">
      <!-- 右侧登录表单 -->
      <div class="w-[450px] h-[510px] bg-white rounded-[12px] shadow-lg">
        <div class="title flex items-baseline mb-6 px-[40px] pt-[27px]">
          <h2 class="text-[32px] font-[500]">欢迎登陆</h2>
          <span class="ml-[18px] text-[#595959]">xx业务后台系统</span>
        </div>

        <div class="border-b-[#ECEFF4] border-b-[1px]">
          <button
            :class="[
              'ml-[40px] w-[92px]  pt-[5px] pb-[13px] text-center',
              activeTab === 'account'
                ? 'text-blue-500 border-b-2 border-blue-500'
                : '',
            ]"
            @click="activeTab = 'account'"
          >
            账号登录
          </button>
          <!-- <button
            :class="[
              'w-[92px] pt-[5px] pb-[13px] ml-[10px] text-center',
              activeTab === 'sms'
                ? 'text-blue-500 border-b-2 border-blue-500'
                : '',
            ]"
            @click="activeTab = 'sms'"
          >
            短信登录
          </button> -->
          <!-- <button
            :class="[
              'flex-1 py-2 text-center',
              activeTab === 'qr'
                ? 'text-blue-500 border-b-2 border-blue-500'
                : '',
            ]"
            @click="activeTab = 'qr'"
          >
            二维码登录
          </button> -->
        </div>

        <form
          v-if="activeTab !== 'qr'"
          @submit.prevent="handleSubmit"
          class="px-[40px] pt-[50px]"
        >
          <div v-if="activeTab === 'account'">
            <div class="relative mb-[26px]">
              <div class="relative">
                <img
                  :src="usernameIcon"
                  alt="用户名"
                  class="absolute left-[10px] top-[50%] transform -translate-y-2/4"
                />
                <input
                  type="text"
                  v-model="username"
                  placeholder="请输入用户名"
                  class="w-full h-[50px] px-[40px] py-2 border rounded outline-none focus:outline-none"
                  :class="{ 'border-red-500': usernameErrorTip }"
                  @blur="usernameHandleBlur"
                />
              </div>
              <p
                v-if="usernameErrorTip"
                class="absolute text-red-500 text-xs bottom-[-20px]"
              >
                {{ usernameErrorTip }}
              </p>
            </div>
            <div class="relative mb-[26px]">
              <div class="relative">
                <img
                  :src="passwordIcon"
                  alt="密码"
                  class="absolute left-[10px] top-[50%] transform -translate-y-2/4"
                />
                <input
                  type="password"
                  v-model="password"
                  placeholder="请输入登录密码"
                  class="w-full h-[50px] px-[40px] py-2 border rounded outline-none focus:outline-none"
                  :class="{ 'border-red-500': passwordErrorTip }"
                  @blur="passwordErrorBlur"
                />
              </div>
              <p
                v-if="passwordErrorTip"
                class="absolute bottom-[-20px] text-red-500 text-xs"
              >
                {{ passwordErrorTip }}
              </p>
            </div>
          </div>

          <div v-if="activeTab === 'sms'">
            <input
              type="text"
              v-model="phone"
              placeholder="请输入手机号"
              class="w-full h-[50px] px-4 py-2 border rounded mb-[26px] outline-none focus:outline-none"
            />
            <div class="flex mb-[26px] outline-none focus:outline-none">
              <input
                type="text"
                v-model="smsCode"
                placeholder="请输入验证码"
                class="w-2/3 h-[50px] px-4 py-2 border rounded-l"
              />
              <button
                type="button"
                @click="sendSmsCode"
                class="w-1/3 h-[50px] bg-blue-500 text-white rounded-r"
              >
                发送验证码
              </button>
            </div>
          </div>

          <button
            type="submit"
            class="cursor-pointer w-full bg-blue-500 text-white py-2 rounded mt-[11px] focus:outline-none"
            :disabled="!isFormValid"
          >
            登录
          </button>
        </form>

        <div v-if="activeTab === 'qr'" class="text-center">
          <div
            class="w-48 h-48 mx-auto bg-gray-200 flex items-center justify-center mb-4"
          >
            <!-- 这里放置实际的二维码图像 -->
            <span class="text-gray-500">二维码占位符</span>
          </div>
          <p class="text-sm text-gray-600">使用手机扫描二维码登录</p>
        </div>

        <!-- <div
          class="mt-[24px] text-[14px] text-gray-600 flex justify-center gap-[17px]"
        >
          <a href="#" class="hover:text-blue-500">忘记密码</a>
          <div>|</div>
          <a href="#" class="hover:text-blue-500">
            <img :src="wechatIcon" alt="微信" class="inline-block" />
            微信账户登录</a
          >
        </div> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, getCurrentInstance } from "vue";
import usernameIcon from "@/assets/image/username.svg";
import passwordIcon from "@/assets/image/password.svg";
import wechatIcon from "@/assets/image/wechat.svg";
import loginApi from "@/api/login.ts";
// @ts-ignore
import smCrypto from "@/utils/smCrypto.js";
import { ElMessage } from "element-plus";
import { getToken, setToken } from '@/utils/auth';
import { useRouter } from "vue-router";
const router =useRouter()
const { proxy } = getCurrentInstance();
const activeTab = ref("account");
const username = ref("");
const password = ref("");
const phone = ref("");
const smsCode = ref("");

const usernameErrorTip = ref("");
const passwordErrorTip = ref("");
const usernameHandleBlur = () => {
  usernameErrorTip.value = usernameError();
};

const passwordErrorBlur = () => {
  passwordErrorTip.value = passwordError();
};

const usernameError = () => {
  if (activeTab.value === "account" && username.value.trim() === "") {
    return "用户名不能为空";
  }
  return "";
};

const passwordError = () => {
  if (activeTab.value === "account" && password.value.trim() === "") {
    return "密码不能为空";
  }
  return "";
};

const isFormValid = computed(() => {
  if (activeTab.value === "account") {
    return username.value.trim() !== "" && password.value.trim() !== "";
  } else if (activeTab.value === "sms") {
    return phone.value.trim() !== "" && smsCode.value.trim() !== "";
  }
  return true;
});

const emit = defineEmits(["loginSuccess", "loginFail"]);
const handleSubmit = () => {
  if (activeTab.value === "account") {
    if (isFormValid.value) {
      loginApi
        .login(username.value, smCrypto.doSm2Encrypt(password.value))
        .then((res) => {
          if (res) {
            // 跳转首页
            setToken(res);
            ElMessage({
              message: proxy.$t("message.loginSuccess"),
              type: "success",
              plain: true,
              // duration: 0,
            });
            router.push('/home')
          } else {
            emit("loginFail", res.msg);
            ElMessage({
              message: res.msg,
              type: "error",
              plain: true,
            });
          }
        });
    } else {
      console.log("表单验证失败");
    }
  } else if (activeTab.value === "sms") {
    if (isFormValid.value) {
      console.log("短信登录:", phone.value, smsCode.value);
      // 实现短信登录逻辑
    } else {
      console.log("表单验证失败");
    }
  }
};

const sendSmsCode = () => {
  console.log("发送验证码到:", phone.value);
  // 实现发送短信验证码逻辑
};
</script>

<style lang="scss" scoped>
.login-container {
  background: url("@/assets/image/login-bg.png") no-repeat center center;
  background-size: cover;
}
</style>
